<template>
  <section id="blog" class="blog">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <!-- End sidebar -->
          <div class="sidebar">
            <h3 class="sidebar-title">Search</h3>
            <div class="sidebar-item search-form">
              <form>
                <input type="text" placeholder="Keyword" v-model="keyword" />
                <button
                  class="btn btn-outline-secondary"
                  type="button"
                  @click.prevent="onBlogSearch"
                >
                  <i class="fa fa-search"></i>
                </button>
              </form>
            </div>
            <h3 class="sidebar-title">Categories</h3>
            <div class="sidebar-item categories">
              <ul>
                <li>
                  <a href="#" @click="changeCategory('22')">All</a>
                </li>
                <template
                  v-for="(item, index) in blogCategoryList"
                  :key="index"
                >
                  <li>
                    <a @click="changeCategory(item.id)">
                      {{ $wordpressDecodeHTML(item.name) }}
                    </a>
                  </li>
                </template>
              </ul>
            </div>
          </div>
          <!-- End sidebar -->
        </div>
        <div class="col-md-8">
          <router-view :key="$route.fullPath"></router-view>
        </div>
        <!-- End blog entries list -->

        <!-- End blog sidebar -->
      </div>
    </div>
  </section>
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";
export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      keyword: "",
      category: 22,
      currentComponent: "blogList",
      blogCategoryList: computed(() => proxy.$store.getters.blogCategoryList),
    });
    const refData = toRefs(data);
    onBeforeMount(() => {
      data.keyword = proxy.$route.query.keyword
        ? proxy.$route.query.keyword
        : "";
      data.category = proxy.$route.query.category
        ? proxy.$route.query.category
        : 22;
    });
    onMounted(() => {});
    //
    const methods = {
      onBlogSearch() {
        // data.currentComponent = "blogList";
        // proxy.$nextTick(() => {
        //   console.log(detail.value);
        //   // detail.value.getList();
        // });
        proxy.$router.push({
          path: "/blog",
          query: {
            keyword: data.keyword,
            category: data.category,
          },
        });
      },
      changeCategory(id) {
        data.category = id;
        this.onBlogSearch();
      },
    };
    //
    return {
      ...refData,
      //
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.blog {
  padding: 40px 0 20px 0;

  .sidebar {
    padding: 30px;
    margin: 0 0 60px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    .sidebar-title {
      font-size: 1.25rem;
      font-weight: 700;
      padding: 0 0 0 0;
      margin: 0 0 15px 0;
      color: #1e4356;
      position: relative;
    }

    .sidebar-item {
      margin-bottom: 30px;
    }

    .search-form {
      form {
        position: relative;

        input[type="text"] {
          border-radius: 4px;
          font-size: 1rem;
          border: 1px solid #ddd;
          width: 100%;
          padding: 0.5rem 0.5rem;
        }
      }

      button {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        border: 0;
        font-size: 1rem;
        padding: 0 15px;
        margin: -1px;
        background: #68a4c4;
        color: #fff;
        transition: 0.3s;
        border-radius: 0 4px 4px 0;
        line-height: 0;
        border: 1px solid #ddd;
      }
    }

    .categories ul {
      list-style: none;
      padding: 0;

      a {
        font-size: 1rem;
        font-family: "Open Sans", sans-serif;
        color: #1e4356;
        transition: 0.3s;

        span {
          padding-left: 5px;
          color: #aaaaaa;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
